<template>
  <div class="switch-repertory">
    <div
      class="switch-repertory-inner"
       v-for="(workSpace, index) in conf.workSpaces"
       :key="index"
       :style="getWrapStyle(index)"
       :class="{active: conf.currentWorkspace && workSpace.name === conf.currentWorkspace.name}"
    >
      <ul :style="getUlStyle(index, workSpace)">
        <li v-for="(space, index) in workSpace.dto.repertoryList" :key="index" v-if="space.disabled">
          <div>{{space.repertory}}</div>
          <div v-if="!space.branches">
            <span>仓库未拉取</span>
            <span>{{space.branch}}</span>
          </div>
          <div v-if="space.branches">
            <span>{{space.branches.default}}</span>
            <span>{{space.branches.current}}</span>
          </div>
          <div>
            <span @click="space.disabled = false">启用</span>
            <span @click="openUrl(space)">打开仓库</span>
          </div>
          <div>{{space.name}}</div>
        </li>
      </ul>
      <ul :style="getUlStyle(index, workSpace)">
        <li v-for="(space, index) in workSpace.dto.repertoryList" :index="index" v-if="!space.disabled">
          <div>{{space.repertory}}</div>
          <div v-if="!space.branches">仓库丢失</div>
          <div v-if="space.branches">
            <span>{{space.branches.default}}</span> <span>{{space.branches.current}}</span>
            <span @click="conf.showChooseBranch(space)">切换</span>
          </div>
          <div>
            <span @click="space.disabled = true">停用</span>
            <span @click="conf.openUrl(space)">打开仓库</span>
            <span>
                    合并请求
                    <b>
                      <i @mouseup="conf.openMergeRequestPage(space, `master`)">m</i>
                      <i @mouseup="conf.openMergeRequestPage(space, `uat`)">u</i>
                      <i @mouseup="conf.openMergeRequestPage(space, `test`)">t</i>
                    </b>
                  </span>
          </div>
          <div>{{space.name}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'home',
    props: ["conf"],
    data() {return {}},
    computed: {},
    mounted() {},
    methods: {
      getUlStyle(index, space){
        return {
          backgroundImage: `url(${space.dto.imgUrl})`,
        }
      },
      getWrapStyle(index){
        const cur = this.conf.workSpaces.indexOf(this.conf.currentWorkspace);
        const len = Math.floor(this.conf.workSpaces.length) ;
        const deg = -(180 / len) * (index - cur);
        const scale = .2 - deg/1000;
        return {
          transform: `rotateX(${deg}deg) rotateY(-${8 + deg / 20}deg) rotateZ(${deg*1}deg) translateZ(${400 - deg / 2}px) translateX(${20 - deg * 2}px) scale3d(${scale}, ${scale}, ${scale})`,
        }
      },
    },
    watch: {},
  }
</script>
<style scoped>
  .switch-repertory {
    flex: 1 1 0;
    position: relative;
    perspective: 500px;
  }
  .switch-repertory-inner{
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    perspective: 500px;
    transition: all .3s;
    z-index: 0;
  }
  .switch-repertory-inner.active{
    transform: rotateX(0deg) translate3d(0, 0, 0) scale3d(1, 1, 1);
    z-index: 1;
  }
  .switch-repertory-inner>ul{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 0;
    margin: 4px;
    background-size: cover;
    background-color: rgba(0, 0, 0, 1);
    border-radius: 10px;
  }
  .switch-repertory-inner>ul:before{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .3;
    background-color: #000;
    z-index: 0;
  }
  .switch-repertory-inner>ul:first-child{
    background-position: center top;
    transform: rotateX(15deg) rotateY(-5deg)  translateZ(100px);
  }
  .switch-repertory-inner>ul:last-child{
    background-position: center bottom;
    transform: rotateX(-8deg) translateZ(100px);
  }
  .switch-repertory-inner > span {
    display: block;
    line-height: 30px;
    margin: 0 14px;
    padding: 0 10px;
    background: #65aed8;
    color: #fff;
  }

  .switch-repertory-inner > ul {
    backface-visibility: hidden;
    padding: 5px 10px;
  }

  .switch-repertory-inner > ul > li {
    display: flex;
    padding: 4px 0;
    overflow: hidden;
    background-color: rgba(0,0,0,.4);
  }

  .switch-repertory-inner > ul > li > div {
    color: #fff;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    flex: 1 1 0;
    padding: 4px 10px;
    border-left: 1px dashed rgba(0,0,0,.8);
    margin: 0 4px;
  }

  .switch-repertory-inner > ul > li > div:nth-child(1) {
    flex: 3 3 0;
  }

  .switch-repertory-inner > ul > li > div:nth-child(2) {
    flex: 1.5 1.5 0;
  }

  .switch-repertory-inner > ul > li > div:nth-child(3) {
    flex: 1.5 1.5 0;
  }

  .switch-repertory-inner > ul > li > div:nth-child(4) {
    flex: .5.5 0;
  }

  .switch-repertory-inner > ul > li > div > span {
    font-size: 18px;
    position: relative;
    background: rgba(0,0,0,.3);
    color: #fff;
    padding: 0 6px;
    border-radius: 2px;
    opacity: .7;
    transition: all .3s;
  }

  .switch-repertory-inner > ul > li > div > span:hover {
    opacity: 1;
  }

  .switch-repertory-inner > ul > li > div > span:active {
    color: #2870bc;
    background-color: #fff;
  }

  .switch-repertory-inner > ul > li > div > span > b {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
  }

  .switch-repertory-inner > ul > li > div > span:hover > b {
    background-color: #fff;
    opacity: 1;
  }

  .switch-repertory-inner > ul > li > div > span:hover > b > i {
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-style: normal;
    color: #666;
    background-color: #fff;
    opacity: .8;
    transition: all .3s;
    border-radius: 2px;
  }

  .switch-repertory-inner > ul > li > div > span:hover > b > i:hover {
    background-color: #2870bc;
    color: #fff;
  }
</style>
